<template>
  <div class="webchatLabel">
    <div class="warn-text"><span class="el-icon-info"></span>
      通话标签上限为1000个，包含禁用标签，如果达到上限可以删除不用的标签，删除标签通话记录中的标签也会删除。禁用标签不影响通话记录中
    </div>
    <div class="funBox">
      <el-input class="search" placeholder="请输入关键字" prefix-icon="el-icon-search" v-model="searchKey" @input="iptChange"></el-input>
      <span>标签：</span>
      <el-select v-model="selectValue" filterable placeholder="请选择" @change="selectChange">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <labelTree
      ref="labelTree"
      @delFun="delFun"
      @openOrStopFun="openOrStopFun"
      @addLabel="addLabel"
      @editLabel="editLabel"
      class="labelTree"
      :treeData="propTreeData"
      :importType="'webchat'">
    </labelTree>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator'
import labelTree from '@/components/labelTree/index.vue'
import { BasicModule } from '@/store/modules/config/basic'
import { deepClone } from '@/utils/common'
import { TagModule } from '@/store/modules/tag'
import { getByteLen } from './index'
function hanleSearchdata (data: any, serachKey: string, selectValue: string) {
  const array: any = []
  for (let i = 0; i < data.length; i++) {
    if (data[i].children && data[i].children.length > 0) {
      data[i].children = hanleSearchdata(data[i].children, serachKey, selectValue)
    }
    if (selectValue === 'open') {
      // eslint-disable-next-line no-mixed-operators
      if (data[i].name.indexOf(serachKey) > -1 && data[i].isEnabled || (data[i].children && data[i].children.length > 0)) {
        array.push(data[i])
      }
    } else if (selectValue === 'stop') {
      // eslint-disable-next-line no-mixed-operators
      if (data[i].name.indexOf(serachKey) > -1 && !data[i].isEnabled || (data[i].children && data[i].children.length > 0)) {
        array.push(data[i])
      }
    } else {
      if (data[i].name.indexOf(serachKey) > -1 || (data[i].children && data[i].children.length > 0)) {
        array.push(data[i])
      }
    }
  }
  return array
}
@Component({
  name: 'callLabel',
  components: { labelTree }
})
export default class CallLabel extends Vue {
  @Ref() private readonly labelTreeRef !: labelTree
  private $message: any
  private searchKey: string = ''

  private selectValue: string = ''

  private options = [
    { label: '全部', value: '' },
    { label: '启用', value: 'open' },
    { label: '停用', value: 'stop' }
  ]

  private searchTreeData = [] // 搜索的树结构

  private propTreeData = [] // 传递的树结构

  private treeData = [] // 数据库树结构

  private getTreeData () { // 获取标签树数据
    const actionData = { url: '/call/action/config/tags/query', method: 'POST', data: {} }
    BasicModule.BasicCommonAction(actionData).then(res => {
      if (res && res.success && res.data.tree) {
        this.treeData = res.data.tree || []
        this.searchTreeData = deepClone(this.treeData)
        this.propTreeData = deepClone(hanleSearchdata(this.searchTreeData, this.searchKey, this.selectValue))
      }
    })
  }

  private addLabel (obj: any) { // 添加标签
    const treeRef: any = this.$refs.labelTree
    const { color, parentId, name } = obj
    if (!name) {
      this.$message.error('标签名字不能为空')
      return
    }
    if (getByteLen(name) > 50) {
      this.$message.error('标签名称过长')
      return
    }
    const sendData = {
      color,
      parentId,
      name
    }
    const actionData = { url: '/call/action/config/tags', method: 'POST', data: sendData }
    BasicModule.BasicCommonAction(actionData).then(res => {
      if (res && res.success) {
        treeRef.addSuccessFun(obj)
        this.$message.success('添加标签成功')
        this.getTreeData()
        TagModule.getTagTree()
      }
    })
  }

  private editLabel (obj: any, type: string) { // 编辑标签
    const treeRef: any = this.$refs.labelTree
    const { color, _id, label } = obj
    if (!type && !label) {
      this.$message.error('标签名字不能为空')
      return
    }
    if (getByteLen(label) > 50) {
      this.$message.error('标签名称过长')
      return
    }
    const sendData = {
      color,
      _id,
      name: label || ''
    }
    if (type === 'color') {
      delete sendData.name
    }
    obj.success = false
    const actionData = { url: '/call/action/config/tags/update', method: 'POST', data: sendData }
    BasicModule.BasicCommonAction(actionData).then(res => {
      if (res && res.success) {
        obj.success = true
        this.$message.success(`${type && type === 'color' ? '更改颜色' : '编辑标签'}成功`)
        TagModule.getTagTree()
      }
      treeRef.editSuccessFun(obj)
    })
  }

  private openOrStopFun (obj: any) {
    const sendData = {
      _id: obj._id,
      isEnabled: !obj.isEnabled
    }
    if (!obj.isEnabled) {
      console.log(TagModule.tagMap.get(obj._id))
      const id = TagModule.tagMap.get(obj._id).parentId
      if (id !== '0' && !TagModule.tagMap.get(id)?.isEnabled) {
        this.$message.error('父级禁用时子级不能启用')
        return
      }
    }
    const actionData = { url: '/call/action/config/tags/update', method: 'POST', data: sendData }
    BasicModule.BasicCommonAction(actionData).then(res => {
      if (res && res.success) {
        this.$message.success(`${obj.isEnabled ? '停用' : '启用'}标签成功`)
        this.getTreeData()
        TagModule.getTagTree()
      }
    })
  }

  private delFun (obj: any) { // 删除
    const sendData = {
      _id: obj._id
    }
    const actionData = { url: '/call/action/config/tags/delete', method: 'POST', data: sendData }
    BasicModule.BasicCommonAction(actionData).then(res => {
      if (res && res.success) {
        this.$message.success('删除标签成功')
        this.getTreeData()
        TagModule.getTagTree()
      }
    })
  }

  private iptChange () {
    this.searchTreeData = deepClone(this.treeData)
    if (this.searchKey) {
      this.propTreeData = deepClone(hanleSearchdata(this.searchTreeData, this.searchKey, this.selectValue))
    } else {
      this.propTreeData = deepClone(this.treeData)
      this.selectChange()
    }
  }

  private selectChange () {
    this.searchTreeData = deepClone(this.treeData)
    if (this.selectValue) {
      this.propTreeData = deepClone(hanleSearchdata(this.searchTreeData, this.searchKey, this.selectValue))
    } else {
      this.propTreeData = deepClone(this.treeData)
    }
  }

  private mounted () {
    this.getTreeData()
  }
}
</script>
<style scoped lang="stylus">
  .webchatLabel
    padding 16px
    border-radius 10px
    height calc(100% - 40px)
    overflow auto
    box-sizing border-box
    margin 0 2px 2px 0
    border 1px solid #ecf0f3
    box-shadow 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0
    .warn-text
      background $bgc-reminder
      padding 14px
      margin-bottom 20px
      border-radius 4px
      font-size 12px
      .el-icon-info
        color $c-warn
        padding-right 6px
        font-size 14px
        vertical-align middle
    .funBox
      border-bottom 1px solid $border-main
      padding-bottom 16px
      .search
        width 500px
        margin-right 20px
    .labelTree
      height calc(100% - 130px)
</style>
